﻿@model List<Sahit.iSoilHotel.Portal.ServiceProxy.Tavern.Models.Room.RoomViewModel>
@{
    ViewBag.Title = "Index";
    var buildings = ViewBag.Buildings;
    var BuildingOptionList = Sahit.iSoilHotel.Portal.ServiceProxy.Tavern.Models.Room.BuildingModel.GetBuildingOptions(buildings);
}
<script type="text/javascript">
    var roomCountEachRow = 4;

    $(document).ready(function () {
        registerSearchPanel();
    });

    function registerSearchPanel() {
        $("#buildingSelect").change(function () {
            renderFloorSelectOptions();
        });
        //initail floors on page loaded
        renderFloorSelectOptions();
    }

    function registerRoomEvents() {
        $('div[name="room"]').bind("click", function () {
            clearSelectedRoomCss();

            selectedRoom = $(this).attr("id");
            selectedRoomStatus = $(this).attr("status");

            addSelecedRoomCss();
        });

        function clearSelectedRoomCss() {
            if (selectedRoom == undefined)
                return;
            var selectedRoomDIV = $('div[id="' + selectedRoom + '"]');
            selectedRoomDIV.removeClass("roomSelected");
        }

        function addSelecedRoomCss() {
            var selectedRoomDIV = $('div[id="' + selectedRoom + '"]');
            selectedRoomDIV.addClass("roomSelected");
        }
    }

    function searchRooms() {
        var buildingID = $("#buildingSelect").val();
        var floorID = $("#floorSelect").val();
        $.getJSON(
            "Room/SearchRoom",
            { buildingID: buildingID, floorID: floorID },
            function (data) {
                clearRoomChart();
                renderRoomChart(data);
            })
    }

    function renderFloorSelectOptions() {
        $.getJSON(
            "Room/GetFloors",
            { BuildingID: $("#buildingSelect").val() },
            function (data) {
                $("#floorSelect").empty();
                $.each(data, function (i, item) {
                    $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#floorSelect"));
                });
            })
    }

    function clearRoomChart() {
        $("#roomContainer").empty();
    }

    function renderRoomChart(rooms) {
        var roomContainer= $("#roomContainer")
        var countEachRow = getRoomCountEachRow();
        $.each(rooms, function (index, room) {
            if (++index % (countEachRow + 1) == 0) {
                $('<div class="clear-fix"></div>').appendTo(roomContainer);
            }
            var roomDiv = $('<div>' + room.Number + '</div>');
            roomDiv.attr("id", room.ID);
            roomDiv.attr("name", "room");
            roomDiv.attr("status", room.StatusID);
            roomDiv.addClass(getRoomClass(room.StatusID));
            roomDiv.appendTo(roomContainer);
        });
        registerRoomEvents();
    }

    function getRoomClass(roomStatusID) {
        switch (roomStatusID) {
            case 0: return "emptyRoom";
            case 1: return "reservedRoom";
            case 2: return "checkInRoom";
            default: return "emptyRoom";
        }
    }

    function getRoomCountEachRow() {
        return roomCountEachRow;
    }
</script>
<div id="roomSearchPanel">
    Building:@Html.DropDownList("buildingSelect", BuildingOptionList as List<SelectListItem>)
    Floor:<select id="floorSelect"></select>
    <input type="button" value="Search" onclick="searchRooms();" />
</div>
<div id ="roomContainer"></div>
